<template>
	<div class="remote">
		<div class="remote-out">
			<div class="isok" @click="ok(4)" @touchstart="original()" @touchend="original()">
				<p :class="{'original':isOK,'originals':!isOK}">OK</p>
			</div>
			<div class="istop" @click="ok(0)" @touchstart="top()" @touchend="top()">
				<p :class="{'remote-out-top':istop,'remote-out-tops':!istop}"></p>
			</div>
			<div class="isleft" @click="ok(2)" @touchstart="left()" @touchend="left()">
				<p :class="{'remote-out-left':isleft,'remote-out-lefts':!isleft}"></p>
			</div>
			<div class="isright" @click="ok(3)" @touchstart="right()" @touchend="right()">
				<p :class="{'remote-out-right':isright,'remote-out-rights':!isright}"></p>
			</div>
			<div class="islower" @click="ok(1)" @touchstart="lower()" @touchend="lower()">
				<p :class="{'remote-out-buttom':islower,'remote-out-buttoms':!islower}"></p>
			</div>
		</div>
		<div :class="{'remote-left':isbtleft,'remote-lefts':!isbtleft}" @click="ok(6)" @touchstart="btleft()" @touchend="btleft()"></div>
		<div :class="{'remote-right':isbtright,'remote-rights':!isbtright}" @click="ok(5)" @touchstart="btright()" @touchend="btright()"></div>
	</div>
</template>

<script>
	import Loading from '../loading';
	import api from "../../api";
	import { refreshTitle } from "../../tools.js";
	export default {
		created() {
			refreshTitle(this.$route.meta.title);
		},
		data() {
			return {
				id: null,
				isOK: true,
				istop: true,
				isleft: true,
				isright: true,
				islower: true,
				isbtleft: true,
				isbtright: true
			}
		},
		methods: {
			ok(id) {
				api.getOk(id).then((result) => {
					if(result.status == 200) {}
				})
			},
			top() {
				this.istop = !this.istop;
			},
			lower() {
				this.islower = !this.islower;
			},
			left() {
				this.isleft = !this.isleft;
			},
			right() {
				this.isright = !this.isright;
			},
			original() {
				this.isOK = !this.isOK;
			},
			btleft() {
				this.isbtleft = !this.isbtleft;
			},
			btright() {
				this.isbtright = !this.isbtright;
			}
		}
	}
</script>

<style>
	/*5s*/
	
	@media screen and (max-width: 320px) {
		.remote-out {
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-bg.png) no-repeat;
			background-size: 100% 100%;
			height: 568px;
		}
		.remote-out .remote-out-right,
		.remote-out .remote-out-rights {
			height: 46px;
			width: 46px;
			background-size: 46px !important;
			position: absolute;
			left: 5px;
			top: 33px;
		}
		.remote-out .remote-out-buttom,
		.remote-out .remote-out-buttoms {
			background-size: 46px !important;
			height: 46px;
			width: 46px;
			margin-left: 32px;
			margin-top: 2px;
		}
		.remote-out .remote-out-top,
		.remote-out .remote-out-tops {
			padding-left: 29px;
			padding-top: 3px;
			background-size: 46px !important;
		}
		.remote-out .remote-out-left,
		.remote-out .remote-out-lefts {
			position: absolute;
			left: -3px;
			top: 30px;
			background-size: 46px !important;
		}
		.istop {
			left: 34.5% !important;
			top: 15.8% !important;
			height: 46px !important;
			width: 108px !important;
		}
		.isleft {
			height: 113px !important;
			width: 50px !important;
			left: 36px !important;
			top: 177px !important;
		}
		.isright {
			height: 113px !important;
			width: 51px !important;
			right: 32px !important;
			top: 173px !important;
		}
		.islower {
			height: 51px !important;
			width: 112px !important;
			right: 100px !important;
			bottom: 205px !important;
		}
		.isok {
			left: 35% !important;
			top: 32.3% !important;
		}
		.remote-left {
			bottom: 25.2% !important;
			height: 40px !important;
			width: 40px !important;
		}
		.remote-lefts {
			height: 40px !important;
			width: 40px !important;
			bottom: 24.2% !important;
		}
		.remote-right {
			right: 8.5% !important;
			bottom: 22.5% !important;
		}
		.remote-rights {
			right: 10% !important;
			bottom: 23% !important;
		}
	}
	/*其他安卓手机*/
	
	@media screen and (min-width: 321px) and (max-width:361px) {
		.remote-out {
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-bg.png) no-repeat;
			background-size: 100% 89% !important;
			height: 667px;
		}
		.remote-out .remote-out-right,
		.remote-out .remote-out-rights {
			height: 46px;
			width: 46px;
			background-size: 46px !important;
			position: absolute;
			left: 6px;
			top: 33px;
		}
		.remote-out .remote-out-buttom,
		.remote-out .remote-out-buttoms {
			background-size: 46px !important;
			height: 46px;
			width: 46px;
			margin-left: 38px;
			margin-top: 7px;
		}
		.remote-out .remote-out-top,
		.remote-out .remote-out-tops {
			padding-left: 29px;
			padding-top: 3px;
			background-size: 46px !important;
		}
		.remote-out .remote-out-left,
		.remote-out .remote-out-lefts {
			position: absolute;
			left: 0px;
			top: 37px;
			background-size: 46px !important;
		}
		.istop {
			left: 35.9% !important;
			top: 15.5% !important;
			height: 58px !important;
			width: 108px !important;
		}
		.isleft {
			height: 117px !important;
			width: 57px !important;
			left: 40px !important;
			top: 191px !important;
		}
		.isright {
			height: 113px !important;
			width: 51px !important;
			right: 42px !important;
			top: 196px !important;
		}
		.islower {
			bottom: 41.3% !important;
			height: 56px !important;
			width: 120px !important;
			right: 119px !important;
		}
		.isok {
			left: 37% !important;
			top: 31% !important;
		}
		.remote-left {
			bottom: 29.32% !important;
			left: 10.7% !important;
		}
		.remote-lefts {
			bottom: 28.6% !important;
			left: 12.5% !important;
		}
		.remote-right {
			right: 9.5% !important;
			bottom: 28.6% !important;
		}
		.remote-rights {
			right: 10.5% !important;
			bottom: 29% !important;
			background-size: 24px !important;
		}
	}
	/*6s*/
	
	@media screen and (max-width:376px) and (min-width:362px) {
		.remote-out {
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-bg.png) no-repeat;
			background-size: 100% 93% !important;
			height: 667px;
		}
		.remote-out .remote-out-right,
		.remote-out .remote-out-rights {
			height: 46px;
			width: 46px;
			background-size: 46px !important;
			position: absolute;
			left: 6px;
			top: 33px;
		}
		.remote-out .remote-out-buttom,
		.remote-out .remote-out-buttoms {
			background-size: 46px !important;
			height: 46px;
			width: 46px;
			margin-left: 37px;
			margin-top: 11px;
		}
		.remote-out .remote-out-top,
		.remote-out .remote-out-tops {
			padding-left: 29px;
			padding-top: 3px;
			background-size: 46px !important;
		}
		.remote-out .remote-out-left,
		.remote-out .remote-out-lefts {
			position: absolute;
			left: -1px;
			top: 37px;
			background-size: 46px !important;
		}
		.istop {
			left: 36.5% !important;
			top: 16% !important;
			height: 58px !important;
			width: 108px !important;
		}
		.isleft {
			height: 117px !important;
			width: 57px !important;
			left: 41px !important;
			top: 202px !important;
		}
		.isright {
			height: 113px !important;
			width: 51px !important;
			right: 44px !important;
			top: 203px !important;
		}
		.islower {
			height: 56px !important;
			width: 120px !important;
			right: 125px !important;
			bottom: 39% !important;
		}
		.isok {
			left: 37% !important;
			top: 32.3% !important;
		}
		.remote-left {
			left: 11% !important;
			bottom: 26.3% !important;
		}
		.remote-lefts {
			left: 13% !important;
			bottom: 25.7% !important;
		}
		.remote-right {
			right: 10% !important;
			bottom: 25.7% !important;
		}
		.remote-rights {
			right: 11% !important;
			bottom: 26% !important;
		}
	}
	/*6splus*/
	
	@media screen and (min-width: 377px) and (max-width: 415px) {
		.original {
			padding-top: 34px !important;
		}
		.originals {
			padding-top: 34px !important;
		}
		.remote-out {
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-bg.png) no-repeat;
			background-size: 100% 100%;
			height: 736px;
			left: 9% !important;
		}
		.remote-out .remote-out-right,
		.remote-out .remote-out-rights {
			height: 46px;
			width: 46px;
			background-size: 46px !important;
			position: absolute;
			left: 7px;
			top: 26px;
		}
		.remote-out .remote-out-buttom,
		.remote-out .remote-out-buttoms {
			background-size: 46px !important;
			height: 46px;
			width: 46px;
			margin-left: 38px;
			margin-top: 8px;
		}
		.remote-out .remote-out-top,
		.remote-out .remote-out-tops {
			padding-left: 33px;
			padding-top: 6px;
			background-size: 46px !important;
		}
		.remote-out .remote-out-left,
		.remote-out .remote-out-lefts {
			position: absolute;
			left: 2px;
			top: 34px;
			background-size: 46px !important;
		}
		.istop {
			top: 16.9% !important;
			left: 37% !important;
			height: 58px !important;
			width: 108px !important;
		}
		.isleft {
			height: 117px !important;
			width: 57px !important;
			left: 47px !important;
			top: 236px !important;
		}
		.isright {
			height: 113px !important;
			width: 51px !important;
			right: 52px !important;
			top: 244px !important;
		}
		.islower {
			height: 56px !important;
			bottom: 37.5% !important;
			width: 120px !important;
			right: 143px !important;
		}
		.isok {
			left: 38% !important;
			top: 32.5% !important;
		}
		.remote-left {
			left: 11.5% !important;
			bottom: 24.5% !important;
		}
		.remote-lefts {
			bottom: 23.9% !important;
			left: 13% !important;
		}
		.remote-right {
			bottom: 23.7% !important;
		}
		.remote-rights {
			bottom: 24% !important;
		}
	}
	/*针对412,411*/
	
	@media only screen and (min-width: 410px) and (max-width: 413px) {
		.remote-left {
			bottom: 24.5% !important;
			left: 11.6% !important;
		}
		.remote-lefts {
			bottom: 23.8% !important;
			left: 13.5% !important;
		}
		.remote-right {
			bottom: 23.8% !important;
		}
		.remote-rights {
			bottom: 24% !important;
		}
	}
	/*针对384*/
	
	@media only screen and (device-width:384px) {
		.remote-out {
			background-size: 100% 89% !important;
		}
		.remote-left {
			bottom: 29.6% !important;
			left: 11.2% !important;
		}
		.remote-lefts {
			bottom: 29% !important;
			left: 13% !important;
		}
		.remote-right {
			right: 10% !important;
			bottom: 29% !important;
		}
		.remote-rights {
			bottom: 29.5% !important;
			right: 11% !important;
		}
		.islower {
			bottom: 41.8% !important;
			right: 132px !important;
		}
		.isok {
			left: 38% !important;
			top: 30% !important;
		}
		.istop {
			top: 15.5% !important;
			left: 35.5% !important;
		}
		.isleft {
			left: 43px !important;
			top: 217px !important;
		}
		.isright {
			right: 47px !important;
			top: 224px !important;
		}
	}
	/*ipad*/
	
	@media screen and (min-width: 416px) and (max-width: 801px) {
		.remote-out {
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-bg.png) 0px 5px no-repeat;
			height: 1024px;
		}
		.remote-out .remote-out-buttom,
		.remote-out .remote-out-buttoms {
			height: 60px;
			width: 60px;
			margin-top: 25px;
			margin-left: 54px;
		}
		.remote-out .remote-out-right,
		.remote-out .remote-out-rights {
			position: absolute;
			left: 24px;
			top: 66px;
			height: 60px !important;
			width: 60px !important;
		}
		.remote-out .remote-out-top,
		.remote-out .remote-out-tops {
			padding-left: 69px !important;
			padding-top: 39px !important;
		}
		.remote-out .remote-out-left,
		.remote-out .remote-out-lefts {
			position: absolute;
			left: 27px;
			top: 43px;
			width: 60px !important;
			height: 60px !important;
		}
		.remote-out,
		.remote-outs {
			left: 11% !important;
		}
		.original,
		.originals {
			left: 35% !important;
			padding-top: 80px !important;
			padding-left: 86px !important;
			font-size: 54px !important;
		}
		.isok {
			top: 29% !important;
			left: 34% !important;
			height: 226px !important;
			width: 234px !important;
		}
		.istop {
			top: 16% !important;
			left: 40% !important;
			height: 99px !important;
			width: 176px !important;
		}
		.isleft {
			height: 171px !important;
			width: 103px !important;
			left: 87px !important;
			top: 337px !important;
		}
		.isright {
			height: 169px !important;
			width: 97px !important;
			right: 94px !important;
			top: 323px !important;
		}
		.islower {
			bottom: 37% !important;
			height: 92px !important;
			width: 191px !important;
			right: 278px !important;
		}
		.remote-left {
			bottom: 25.4% !important;
			left: 15% !important;
			position: absolute !important;
			height: 50px !important;
			width: 50px !important;
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-lefts.png) 0px 15px no-repeat !important;
			background-size: 42px !important;
		}
		.remote-lefts {
			bottom: 24% !important;
			left: 13.5% !important;
			position: absolute !important;
			height: 66px !important;
			width: 66px !important;
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-left.png) 0px 0px no-repeat !important;
			background-size: 66px !important;
		}
		.remote-right {
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-right.png) no-repeat !important;
			height: 66px !important;
			width: 66px !important;
			position: absolute !important;
			right: 13.5% !important;
			bottom: 24.2% !important;
			background-size: 66px !important;
		}
		.remote-rights {
			background: url(http://wechat-static.shapejoy.com/assets/img/remote-rights.png) no-repeat !important;
			height: 46px !important;
			width: 46px !important;
			position: absolute !important;
			right: 14% !important;
			bottom: 24.4% !important;
			background-size: 43px !important;
		}
	}
	
	@media only screen and (min-width: 601px) {}
	/*公共样式*/
	
	body {
		position: relative;
	}
	
	.isok {
		height: 100px;
		width: 100px;
		text-align: center;
		position: absolute;
		left: 29%;
		top: 33%;
	}
	
	.istop {
		height: 48px;
		width: 84px;
		position: absolute;
		left: 28.9%;
		top: 0.7%;
		border-radius: 17px;
	}
	
	.original {
		height: 60px;
		font-size: 30px;
		color: #fff;
		width: 60px;
		padding-left: 19px;
		padding-top: 25px;
	}
	
	.originals {
		height: 60px;
		font-size: 30px;
		width: 60px;
		padding-left: 19px;
		padding-top: 25px;
		color: #fbb811;
	}
	
	.clickafter {
		color: #fbb811;
		font-size: 36px;
		text-shadow: 0px 1px 7px #fbb811;
	}
	
	.remote-out {
		background-size: 100% 96%;
	}
	
	.remote-out img {
		height: 40px;
		width: 40px;
	}
	
	.remote-out .remote-out-top {
		height: 46px;
		width: 46px;
		background: url(http://wechat-static.shapejoy.com/assets/img/remot-top.png) no-repeat;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}
	
	.remote-out .remote-out-tops {
		height: 46px;
		width: 46px;
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-click.png) no-repeat;
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}
	
	.remote-left {
		height: 50px;
		width: 50px;
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-lefts.png) 13px 15px no-repeat;
		background-size: 23px;
		position: absolute;
		bottom: 15.6%;
		left: 10%;
	}
	
	.remote-lefts {
		height: 50px;
		width: 50px;
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-left.png) no-repeat;
		background-size: 38px;
		position: absolute;
		bottom: 14.7%;
		left: 12.2%;
	}
	
	.remote-right {
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-right.png) no-repeat;
		height: 50px;
		width: 50px;
		position: absolute;
		right: 10.5%;
		background-size: 38px;
		bottom: 20.5%;
	}
	
	.remote-rights {
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-rights.png) no-repeat;
		height: 38px;
		width: 38px;
		position: absolute;
		right: 11.7%;
		background-size: 26px;
		bottom: 21.1%;
	}
	
	.remote-out .remote-out-left {
		background: url(http://wechat-static.shapejoy.com/assets/img/remot-top.png) no-repeat;
		width: 46px;
		height: 46px;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
	}
	
	.remote-out .remote-out-lefts {
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-click.png) no-repeat;
		width: 46px;
		height: 46px;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
	}
	
	.remote-out .remote-out-right {
		background: url(http://wechat-static.shapejoy.com/assets/img/remot-top.png) no-repeat;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
	}
	
	.remote-out .remote-out-rights {
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-click.png) no-repeat;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
	}
	
	.remote-out .remote-out-buttom {
		background: url(http://wechat-static.shapejoy.com/assets/img/remot-top.png) no-repeat;
	}
	
	.remote-out .remote-out-buttoms {
		background: url(http://wechat-static.shapejoy.com/assets/img/remote-click.png) no-repeat;
	}
	
	.isleft {
		height: 59px;
		width: 42px;
		position: absolute;
		left: 16px;
		top: 92px;
	}
	
	.isright {
		height: 50px;
		width: 40px;
		position: absolute;
		right: 72px;
		top: 98px;
	}
	
	.islower {
		height: 44px;
		width: 79px;
		position: absolute;
		right: 148px;
		bottom: 54px;
	}
</style>